<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('订单号')}}：</p>
        <el-input v-model="order_id" :placeholder="$t('请输入订单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('会员号')}}：</p>
        <el-input v-model="member_id" :placeholder="$t('请输入会员号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb" style="width: 290px;">
        <p class="label font14 text_black">{{$t('信用分单号')}}：</p>
        <el-input v-model="credit_id" :placeholder="$t('请输入信用分单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('机柜号')}}：</p>
        <el-input v-model="device_id" :placeholder="$t('请输入机柜号')"></el-input>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('客户端')}}：</p>
        <el-select v-model="clientVal" :placeholder="$t('请选择')" @change="clientChange">
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{$t('所属代理商')}}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList">
          <p class="text-ellipsis">{{ agent ? agent : $t('选择代理商') }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">{{$t('清除')}}</button>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{$t('所属商户')}}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList">
          <p class="text-ellipsis">{{ merchant ? merchant : $t('选择商户') }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearMerchant">{{$t('清除')}}</button>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{$t('提交')}}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="order_no" :label="$t('订单ID')" width="170"></el-table-column>
        <el-table-column prop="trade_no" :label="$t('信用分单号')" width="280"></el-table-column>
        <el-table-column prop="member_id" :label="$t('会员号')" width="90"></el-table-column>
        <el-table-column prop="start_time" :label="$t('使用时间')" width="160">
          <template slot-scope="{ row }">
            <span>{{ row.start_time }} {{ row.end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_status_text" :label="$t('支付状态')"></el-table-column>
        <el-table-column prop="order_status_text" :label="$t('订单状态')"></el-table-column>
        <el-table-column prop="amount" :label="$t('金额')"></el-table-column>
        <el-table-column prop="nick" :label="$t('用户名称')"></el-table-column>
        <el-table-column prop="app_name" :label="$t('客户端')"></el-table-column>
        <el-table-column prop="seller_name" :label="$t('商户名称')"></el-table-column>
        <el-table-column prop="agency_name" :label="$t('所属代理')"></el-table-column>
        
        <el-table-column prop="device_code" :label="$t('机柜号')" width="140"></el-table-column>
        
        <el-table-column prop="overdueDay" :label="$t('租借天数')"></el-table-column>
        <el-table-column :label="$t('操作')" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handlePay(scope.row)"
              v-if="(scope.row.app_type == 1) && (permissions.indexOf('/order/authPay') != -1)"
            >{{$t('查询订单状态')}}</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handlePay(scope.row)"
              v-if="(scope.row.app_type == 2) && (scope.row.show_pay == 1) && (permissions.indexOf('/order/authPay') != -1)"
            >{{$t('转支付')}}</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleOverdue(scope.row)"
              v-if="(scope.row.app_type == 2) && (scope.row.is_overdue == 1) && (permissions.indexOf('/order/overdue') != -1)"
            >{{$t('逾期')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
    <merchant-list ref="merchantList" :agency_id="aid" @hide="closeMerchantList"></merchant-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "order-creditList",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      order_id: "",
      member_id: "",
      credit_id: "",
      device_id: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("选择客户端")
        },
        {
          value: 1,
          label: that.$t("微信小程序")
        },
        {
          value: 2,
          label: that.$t("支付宝小程序")
        }
      ],
      agent: "",
      aid: "",
      merchant: "",
      sid: "",
      tableData: []
    };
  },
  components: {
    agentList,
    merchantList
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.order_id = ''
      this.member_id = ''
      this.credit_id = ''
      this.aid = ''
      this.device_id = ''
      this.clientVal = 0
      this.sid = ''
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/order/creditList?page=" + this.page, {
          page_size: this.page_size,
          order_no: this.order_id,
          member_id: this.member_id,
          trade_no: this.credit_id,
          aid: this.aid,
          device_code: this.device_id,
          app_type: this.clientVal,
          sid: this.sid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    clientChange(val) {
      this.clientVal = val;
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
      this.merchant = "";
      this.sid = "";
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
      this.merchant = "";
      this.sid = "";
    },
    openMerchantList() {
      this.$refs.merchantList.show();
    },
    closeMerchantList(data) {
      this.merchant = data.name;
      this.sid = data.id;
    },
    clearMerchant() {
      this.merchant = "";
      this.sid = "";
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    handlePay(row) {
      let str =
        row.app_type == 2
          ? this.$t("是否需要主动扣取当前订单金额")
          : this.$t("是否要查询订单状态");
      this.$confirm(str)
        .then(() => {
          util
            .$http("/order/authPay", {
              order_no: row.order_no
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    handleOverdue(row) {
      this.$confirm(
        this.$t("设为逾期后") +
          "," +
          this.$t("将会影响用户的信用分") +
          "," +
          this.$t("是否继续设置")
      )
        .then(() => {
          util
            .$http("/order/overdue", {
              order_no: row.order_no
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
